import React, { Component } from "react";
import { HotStyle } from "../style";

class Hottopic extends Component {
  state = {
    data: [
      {
        id: 1,
        img:
          "http://shihuo.hupucdn.com/column/201811/2215/2e79d7e6da19d652db2c54020574701e.jpg",
        title: "晒穿搭AJ领回家",
      },
      {
        id: 2,
        img:
          "http://shihuo.hupucdn.com/appHome/201811/1020/95e951e28bf1a30b58c03204e11e16a6.jpg",
        title: "限时下单 全场返利",
      },
      {
        id: 3,
        img:
          "http://shihuo.hupucdn.com/column/201812/2919/08a6f969e4e07d33209b8ba948ed425c.png",
        title: "晒照赢新年康扣",
      },
    ],
  };
  render() {
    return (
      <HotStyle>
        <p>热门话题</p>
        <div>
          {this.state.data.map((item) => (
            <div key={item.id}>
              <img src={item.img} alt="" />
              <p>{item.title}</p>
            </div>
          ))}
          <div className="more">查看更多</div>
        </div>
      </HotStyle>
    );
  }
}

export default Hottopic;
